<template>
	<view>
		<view class="background">
			<view class="title">个人中心</view>
			<view class="user-center"  @click="login">
				<view class="max">
					<u-avatar size='120rpx' icon="account" fontSize="50"></u-avatar>
				</view>
				<view class="clicklog">
					<span class="click-login">点击登录</span><br />
					<span class="experience" >登录体验更多功能</span>
				</view>
			</view>

			<view class="balance">
				<view class="" @click="wallet">
					<view class="">0</view>
					<view class="">余额</view>
				</view>
				<view class="">
					<view class="">0</view>
					<view class="">积分</view>
				</view>
				<view class="" @click="coupon">
					<view class="">0</view>
					<view class="">优惠卷</view>
				</view>
				<view class="" @click="Collection">
					<view class="">0</view>
					<view class="">收藏</view>
				</view>
			</view>
			<view class="member">
				<view class="">V登陆查看会员权限</view>
				<view class="">了解会员></view>
			</view>
		</view>
		<view class="top-margin" >
		<view class="order">
			<view class="user-order">我的订单</view>
			<view class="box-order" @click="order">全部订单></view>
		</view>
		<u-divider lineColor='darkgray'></u-divider>
		<view v-for="item in payment" class="order-box" @click="userorder(item)">
			<img :src="item.img" alt="" class="order-img"/>
			<view class="order-i">{{item.title}}</view>
		</view>
		<view style="margin-top: 200rpx;">
			<view style="font-weight: 700;">我的服务</view>
		</view>
		<u-divider lineColor='darkgray'></u-divider>
		<view v-for="item in service" class="bottom"  @click="distribution(item)">
			<img :src="item.img" alt="" class="bottom-img" />
			<view class="bottom-i" >{{item.title}}</view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//我的服务数据
				service:[
					{img:'../../static/logo.png',title:'分销推广',url:'/pages/promotion/promotion'},
					{img:'../../static/logo.png',title:'收货地址',url:'/pages/address/address'},
					{img:'../../static/logo.png',title:'联系客服',url:'/pages/customerService/customerService'},
					{img:'../../static/logo.png',title:'消息中心',url:'/pages/messageCenter/messageCenter'},
					{img:'../../static/logo.png',title:'邀请海报',url:'/pages/poster/poster'},
					{img:'../../static/logo.png',title:'积分商城',url:'/pages/pointsMall/pointsMall'},
					
				],
				//我的订单
				payment:[
					{img:'../../static/logo.png',title:'待付款'},
					{img:'../../static/logo.png',title:'待发货'},
					{img:'../../static/logo.png',title:'待收货'},
					{img:'../../static/logo.png',title:'商品评价',http:'/pages/evaluationList/evaluationList'},
					{img:'../../static/logo.png',title:'售后',http:'/pages/aftersaleslist/aftersaleslist'}
				]
			}
		},
		methods: {
			//登录页
			login() {
				uni.navigateTo({
					url: '/pages/login/login',
				})
			},
			// 我的服务
			distribution(item){
				uni.navigateTo({
					url:item.url
				})
			},
			// 全部订单跳转
			order(){
				uni.navigateTo({
					url:'/pages/orderList/orderList'
				})
			},
			//我的订单
			userorder(item){
				uni.navigateTo({
					url:item.http
				})
			},
			//收藏
			Collection(){
				uni.navigateTo({
					url:'/pages/myCollection/myCollection'
				})
			},
			//余额
			wallet(){
				uni.navigateTo({
					url:'/pages/myWallet/myWallet'
				})
			},
			//优惠卷
			coupon(){
				uni.navigateTo({
					url:'/pages/myDiscount/myDiscount'
				})
			}
		}
	}
</script>

<style>
	.background {
		width: 100%;
		height: 430rpx;
		background: repeating-linear-gradient(to right, #FD5194, #FB4555);
	}
	.max{
		float: left;
	}
	.title {
		text-align: center;
		color: white;
		font-size: 35rpx;
		font-weight: 700;
	}
	.click-login{
		font-size: 40rpx;
	}
	.experience{
		font-size: 25rpx;
	}
	.user-order{
		font-weight: 700;
	}
	.top-margin{
		margin-left:25rpx ;
		margin-right: 25rpx;
	}
	.box-order{
		color: gray; 
	}
	.balance {
		display: flex;
		justify-content: space-between;
		margin-top: 60rpx;
		color: white;
		text-align: center;
		margin-left: 50rpx;
		margin-right: 50rpx;
	}

	.member {
		width: 90%;
		height: 60rpx;
		padding-left: 15rpx;
		padding-right: 15rpx;
		padding-top: 20rpx;
		background-color: black;
		color: #FFE0A1;
		margin-left: 25rpx;
		margin-top: 30rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: space-between;
	}
	.clicklog{
		color: white;
		 margin-left: 140rpx;
		  margin-top: 40rpx;
	}
	.bottom{
		float: left;
		 margin-left: 55rpx;
		  margin-top: 20rpx;
	}
	.bottom-i{
		font-size: 30rpx;
		 text-align: center;
	}
	.bottom-img{
		width: 80rpx;
		height: 80rpx;
	}
	.order{
		display: flex; 
		justify-content: space-between; 
		margin-top: 50rpx;
	}
	.user-center{
		margin-left: 30rpx;
	}
	.order-i{
		font-size: 30rpx; 
		text-align: center;
	}
	.user-service{
		font-weight: 700;
	}
	.order-img{
		width: 80rpx;
		height: 80rpx;
	}
	.order-box{
		float: left; 
		margin-left: 40rpx;
	}
	.service{
		margin-top: 200rpx;
	}
</style>